<template>
  <view class="task-item">
    <u-card
      :show-head="false"
      :foot-border-top="false"
      :body-style="{ 'padding-bottom': '20rpx' }"
      border-radius="32"
      @click="clickhandel(currItem)"
    >
      <view slot="body">
        <view class="font-bold u-font-32 u-m-b-20 u-line-3 u-text-color">
          <u-icon
            v-if="currItem.projectPriority"
            size="28"
            color="#fa3534"
            custom-prefix="custom-icon"
            name="1"
          ></u-icon>
          <text class="text-primary">【{{ currItem.projectType }}】</text>
          {{ currItem.projectName }}
        </view>
        <view class="u-m-t-15"
          ><text class="u-tips-color">项目编号：</text>
          <text class="u-content-color">{{ currItem.projectNo }}</text></view
        >
        <view class="u-line-1 u-m-t-15 u-m-b-15"
          ><text class="u-tips-color">专业/主要研究者：</text>
          <text class="u-content-color">{{
            setProjectProfessionList(currItem.projectProfessionList)
          }}</text></view
        >
        <u-line-progress
          active-color="#0177fd"
          :percent="currItem.groupRate ? currItem.groupRate * 100 : 0"
          height="14"
          :show-percent="false"
        ></u-line-progress>
      </view>
      <view slot="foot">
        <view class="u-flex u-row-between u-p-b-20 u-p-l-32 u-p-r-32">
          <view>
            <text class="u-tips-color">入组进度：</text
            ><text class="u-content-color"
              >{{
                currItem.groupRate
                  ? Number((currItem.groupRate * 100).toFixed(2))
                  : 0
              }}%</text
            >
          </view>
          <text
            :class="PROJECT_STATUS_MAP[currItem.projectStatus].color"
            class="font-bold"
            >{{ PROJECT_STATUS_MAP[currItem.projectStatus].label }}</text
          >
        </view>
      </view>
    </u-card>
  </view>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue';
import { PROJECT_STATUS_MAP } from '../index';
const props = defineProps<{
  currItem: any;
  lastItem: any;
}>();
const { lastItem, currItem } = toRefs(props);

// 设置专业
const setProjectProfessionList = (list: any) => {
  if (!list) {
    return '';
  }
  list = list.filter((item: any) => item.departmentId);
  const arr = list.map((item: any) => {
    const str: any[] = [];
    if (item.departmentName) {
      str.push(item.departmentName);
    }
    if (item.piName) {
      str.push(item.piName);
    }
    return str.join('/');
  });
  return arr.join('、');
};
const clickhandel = (item: any) => {
  (uni as any).$Router.push({
    name: 'projectHome',
    params: { params: encodeURIComponent(JSON.stringify(item)) },
  });
};
</script>
<style lang="scss" scoped>
.task-item {
  overflow: hidden;

  & :first-child {
    margin-top: 0 !important;
  }
  .text-primary {
    color: $u-type-primary;
  }
}
</style>
